<template>
    <div>
        <div>列表渲染</div>
        <div>----------------------------------------------------------</div>
        <!--  v-for 指令 -->
        <!--  用法一：v-for="item in items" 数组 -->
        <div>----------------------------------------------------------</div>
        <ul id="example-1">
            <li v-for='item in items' :key="item.index">
                {{ item.message }}
            </li>
        </ul>

        <!--  用法二：v-for="(item,index) in items" 数组 -->
        <div>----------------------------------------------------------</div>
         <ul id="example-2">
            <li v-for='(item,index) in items' :key="item.index">
               {{ index }} - {{ item.message }}
            </li>
        </ul>

        <!--  用法三：v-for="(value,key) in object" 对象 -->
        <div>----------------------------------------------------------</div>
        <ul id="example-3">
            <li v-for='(value,key) in object' :key="key">
               {{ key }} : {{  value }}
            </li>
        </ul>

        <!-- 添加按钮 -->
        <div>----------------------------------------------------------</div>
        <div v-html="html" @click="go" :class="btn"></div>

        
    </div>
</template>
<script>
export default {
    data(){
        return{
            items:[
                {message: 'Foo'},
                {message: 'Bar'},
                {message: 'Foo'},
                {message: 'Bar'}
            ],
            object:{
                first:'xiao',
                second:'ming',
                age:19
            },
            html:'<button>点击我</button>',
            btn:'btn'
        }
    },
    methods:{
        go:function(){
            alert('我出来了');
        }
    }
}
</script>


